<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-buttons collapse="true" slot="start">
        <ion-back-button text="签到"></ion-back-button>
      </ion-buttons>
    </ion-buttons>
    <ion-title style="padding-left: 15%;">签到统计数据</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-label style="padding-left: 20%;">平均出勤率</ion-label>
      </ion-col>
      <ion-col>
        <ion-label style="padding-left: 30%;">考勤次数</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <h1 style="padding-left: 30%;color:orange;">75%</h1>
      </ion-col>
      <ion-col>
        <h1 style="padding-left: 45%;color:rgb(0, 247, 255);">3</h1>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-text style="padding-left: 5%;font-size: 2px;">成员详情</ion-text>
  <ion-text style="padding-left: 20%;font-size: 2px;">缺勤</ion-text>
  <ion-text style="padding-left: 3%;font-size: 2px;">事假</ion-text>
  <ion-text style="padding-left: 3%;font-size: 2px;">病假</ion-text>
  <ion-text style="padding-left: 3%;font-size: 2px;">迟到</ion-text>
  <ion-text style="padding-left: 3%;font-size: 2px;">早退</ion-text>
  <ion-text style="padding-left: 3%;font-size: 2px;">缺勤率</ion-text>
  <ion-list>
    <ion-item>
      <ion-thumbnail slot="start">
        <img src="/assets/img/course.jpg">
      </ion-thumbnail>
      <ion-label>
        <h3 style="font-size: 1px;">
          赵如意
        </h3>
        <p style="font-size: 1px;">
          1234567
        </p>
      </ion-label>
      <ion-text style="padding-right: 10%;font-size: 2px;">0</ion-text>
      <ion-text style="padding-right: 10%;font-size: 2px;">0</ion-text>
      <ion-text style="padding-right: 12%;font-size: 2px;">0</ion-text>
      <ion-text style="padding-right: 10%;font-size: 2px;">0</ion-text>
      <ion-text style="padding-right: 12%;font-size: 2px;">0</ion-text>
      <ion-text style="padding-right: 5%;font-size: 2px;">0</ion-text>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <div style='text-align:center'>
    <ion-label>未完待续...</ion-label>
  </div>
</ion-footer>